<!-- 日期 -->
<template>
  <div>
    <CalendarField
      v-if="['daterange', 'monthrange', 'date'].includes(dateType)"
      v-model="dateValue"
      :type="
        ['daterange', 'monthrange'].includes(dateType) ? 'range' : 'single'
      "
      :field-props="{
        label: labelInfo.show ? labelInfo.label : '',
        placeholder: '请选择',
      }"
      :min-date="minDate"
      :max-date="maxDate"
    />
    <DatePickerField
      v-else
      v-model="dateValue"
      :field-prop="{
        label: '日期',
        placeholder: '请选择',
      }"
      title="选择日期"
      :columns-type="columnsType"
      :min-date="minDate"
      :max-date="maxDate"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { CalendarField, DatePickerField } from '@mdfe/vant';
import dayjs from 'dayjs';

defineOptions({
  name: 'DatePick',
});

const props = defineProps({
  componentStyle: {
    type: Object,
    default: () => {
      return {
        title: {
          show: true,
          text: '日期',
        },
        style: {
          width: 300,
          height: 30,
        },
        advancedFields: '',
        advancedType: 'date',
        advancedControlRange: '',
        advancedDefaultValue: '',
        advancedSelectableSection: [],
        advancedIsRequired: false,
        advancedBind: {
          isCheck: false,
          dataType: '年',
          canShuMing: '',
        },
      };
    },
  },
});

const dateValue = ref();
const currentDate = new Date();
const minDate = ref(
  new Date(currentDate.getTime() - 20 * 365 * 24 * 60 * 60 * 1000),
);
const maxDate = ref(
  new Date(currentDate.getTime() + 20 * 365 * 24 * 60 * 60 * 1000),
);

watch(
  () => props.componentStyle,
  (newVal) => {
    console.log('componentStyle11111', newVal);
  },
);

const dateType = computed(() => props.componentStyle?.advancedType || 'date');

const columnsType = computed(() => {
  if (dateType.value === 'year') return ['year'];
  else if (dateType.value === 'month') return ['year', 'month'];
  return ['year', 'month', 'day'];
});

watch(
  () => columnsType.value,
  () => {
    console.log('columnsType', columnsType.value);
  },
);

watch(
  () => props.componentStyle?.advancedSelectableSection,
  (section) => {
    if (section[0] && section[1]) {
      // 开始时间和结束时间都在
    }
  },
);

watch(
  () => dateType.value,
  () => {
    // 清空数据
    if (['daterange', 'monthrange', 'date'].includes(dateType.value)) {
      dateValue.value = null;
    } else {
      dateValue.value = [];
    }
  },
);

// 默认值类型
const advancedDefaultValue = computed(() => {
  if (props.componentStyle?.advancedDefaultValue) {
    return props.componentStyle?.advancedDefaultValue;
  }
  return '';
});

const labelInfo = computed(() => {
  if (props.componentStyle?.title) {
    return {
      label: props.componentStyle.title.text,
      show: props.componentStyle.title.show,
    };
  }
  return { label: '日期', show: true };
});

watch(
  () => advancedDefaultValue.value,
  (val) => {
    const time = new Date();
    const year = time.getFullYear();
    const month = time.getMonth();
    switch (val) {
      case 'year':
        dateValue.value = dayjs(time).format('YYYY');
        break;
      case 'month':
        dateValue.value = dayjs(time).format('YYYY/MM');
        break;
      case 'day':
        dateValue.value = dayjs(time).format('YYYY/MM/DD');
        break;
      case 'lastWeek':
        time.setTime(time.getTime() - 3600 * 1000 * 24 * 7);
        dateValue.value = dayjs(time).format('YYYY/WW');
        break;
      case 'lastMonth':
        if (month - 1 > 0) {
          time.setMonth(month - 1);
        } else {
          time.setFullYear(year - 1);
          time.setMonth(11 + month - 1); //11 + month - 1
        }
        break;
      case 'lastQuarter':
        if (month - 3 > 0) {
          time.setMonth(month - 3);
        } else {
          time.setFullYear(year - 1);
          time.setMonth(11 + month - 3); //11 + month - 3
        }
        break;
      case 'lastHalfYear':
        if (month - 6 > 0) {
          time.setMonth(month - 6);
        } else {
          time.setFullYear(year - 1);
          time.setMonth(11 + month - 6); //12 + month - 6
        }
        break;
      case 'lastYear':
        time.setFullYear(year - 1);
        break;
      default:
        break;
    }
  },
);
// 日期控件的格式
const formMat = computed(() => {
  let _format;
  switch (dateType.value) {
    case 'date':
      _format = 'YYYY/MM/DD';
      break;
    case 'month':
      _format = 'YYYY/MM';
      break;
    case 'year':
      _format = 'YYYY';
      break;
    case 'daterange':
      _format = 'YYYY/MM/DD';
      break;
    case 'monthrange':
      _format = 'YYYY/MM';
      break;
    default:
      break;
  }
  return _format;
});
</script>
